<template>
  <div class="player-dialog-simple">
    <div class="dialog-simple-l">
      <el-scrollbar wrap-class="com-scrollbar-wrap-class" :size="6">
        <ul class="dialog-simple-list">
          <li v-for="(item, index) in 20" :key="index">
            <div class="com-ellipsis" :class="{'dialog-simple-list-sed': sedData && sedData === item}" :title="'某某某点位'" @click="sel(item)">
              <i></i>某某某点位
            </div>
          </li>
        </ul>
      </el-scrollbar>
    </div>
    <div class="dialog-simple-r">
      <MySimplePlayer
        v-if="cameraData"
        :cameraData="cameraData">
      </MySimplePlayer>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PlayerDialogSimple',
  components: {
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      sedData: null,
      cameraData: null
    }
  },
  created () {
  },
  mounted () {
    this.sel(1)
  },
  methods: {
    sel (data) {
      this.sedData = data
      this.cameraData = null
      this.$nextTick(() => {
        window.setTimeout(() => {
          this.cameraData = {
            cameraIndexCode: 'D1231211',
            cameraName: '测试点位1',
            longitude: 111.707556,
            latitude: 28.942367,
            type: 1
          }
        }, 200)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.player-dialog-simple {
  height: 483px;
  padding-top: 7px;
  .dialog-simple-l {
    float: left;
    width: 280px; height: 100%;
    background-color: rgba(224,228,240,0.6);
    border-radius: 4px;
    .dialog-simple-list {
      padding: 8px 10px 8px 10px;
      > li {
        padding: 2px 0;
        > div {
          position: relative;
          height: 28px; line-height: 28px;
          cursor: pointer;
          padding: 0 12px 0 34px;
          border-radius: 4px;
          color: rgba(0,0,0,0.7); font-size: 14px;
          transition: all 0.3s ease-out;
          > i {
            position: absolute; left: 6px; top: 2px;
            width: 24px; height: 24px;
            background-position: center center; background-size: 100% 100%; background-repeat: no-repeat;
            background-image: url('@/assets/images/comm/player_simp_icon.png');
          }
          &.dialog-simple-list-sed {
            background-color: #006CFF !important;
            color: #fff !important;
            cursor: default !important;
            > i {
              background-image: url('@/assets/images/comm/player_simp_icon_sed.png');
            }
          }
          &:hover {
            background-color: rgba(0,108,255,0.2);
            color: rgba(0,0,0,0.8);
          }
        }
      }
    }
  }
  .dialog-simple-r {
    width: 688px; height: 100%;
    margin-left: 292px;
    background-color: rgba(0, 0, 0, 0.9);
  }
}
</style>
